<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <input type="file" hidden ref="file" @change="onFileChange">
    <!-- 个人信息 -->
    <van-cell title="头像" is-link>
      <van-image
        class="avatar"
        fit="cover"
        round
        :src="user.photo"
        @click="$refs.file.click()"
      />
    </van-cell>

    <van-cell title="昵称" @click="isUpdateNameShow = true" :value="user.name" is-link />
    <van-cell title="性别" @click="isShow = true" :value="user.gender === 0 ? '男' : '女'" is-link />
    <van-cell title="生日" @click="ish = true" :value="user.birthday" is-link />

    <!-- 编辑昵称 -->
   <van-popup v-model="isUpdateNameShow" style="height: 100%" position="bottom">
    <updateName v-model="user.name" v-if="isUpdateNameShow" @close="isUpdateNameShow = false"></updateName>
  </van-popup>

      <!-- 编辑事件 -->
   <van-popup v-model="ish" position="bottom">
    <updateBirthday v-model="user.birthday" v-if="ish" @close="ish = false"></updateBirthday>
  </van-popup>

  <!-- 编辑头像 -->
<van-popup v-model="isUpdatePhotoShow" position="bottom" style="height: 100%;">
 <updatePhoto v-if="isUpdatePhotoShow" 
 :img="img" 
 @close="isUpdatePhotoShow = false"
 @update-photo="user.photo = $event"></updatePhoto>
</van-popup>
  </div>
</template>

<script>
import {getUseredit} from '@/api/user.js'
import updateName from '../../components/update-name.vue'
import updateGender from '../../components/update-gender.vue'
import updateBirthday from '../../components/update-birthday.vue';
import updatePhoto from '../../components/update-photo.vue';
export default {
  data(){
    return{
     user:{},
     isUpdateNameShow: false,  // 控制昵称的弹框
     isShow:false, // 控制性别的弹框
     ish:false, //控制生日弹窗
     img:null,
     isUpdatePhotoShow:false,
    }
  },
  components:{updateName,updateGender,updateBirthday,updatePhoto},
  created(){
  this.loadinggetuser()
  },
  methods:{
  async loadinggetuser(){
  try {
    const {data} = await getUseredit()
    /* console.log(data); */
    this.user=data.data
  } catch (error) {
    this.$toast.fail('获取用户基本信息失败')
  }
 },
 onFileChange(){
  //获取到文件上传表单元素的files属性中保存的第一张图片
  const file = this.$refs.file.files[0]
  //获取文件上传表单元素选中的第一张图片读取到内存中
  this.img = window.URL.createObjectURL(file)
  this.isUpdatePhotoShow =true
  this.$refs.file.value =''
 }
  },

};
</script>

<style scoped lang="less">
.user-profile {
  .avatar {
    width: 60px;
    height: 60px;
  }
  .van-popup {
  background-color: #f5f7f9;
}
}
</style>